Influencely - Documentation

Getting Started

Influencely is modern and elegant HTML Template for influencer and talent agencies. You can also use this creative template for businesses offering talent management, influencer marketing agency, creative digital agency, start-up, tech company, tech business and other business company related. This template is built using HTML5, CSS3, JavaScript, and is supported by frameworks such as Bootstrap to provide a modern and responsive look.

File Structure

  • /Css - folder with css files including Font Awesome, Google Fonts, Animate, Bootstrap and custom styles
  • /Webfonts - folder with icon fonts
  • /Image - folder with all images
  • /Js - folder with jQuery, Swiper, & custom JavaScript files

Customization

You can follow the following code structure which is made easy and simple to understand.
  • Code example
    • <!-- Banner -->
<div class="section section-banner">
...
</div>

<!-- Section Service -->
<div class="section bg-accent-color-4">
...
</div>

<!-- Section About Us -->
<div class="section">
...
</div>

<!-- Section Footer -->
<div class="section-footer bg-footer">
...
</div>
  • Changing Logo & Website Name
    • <a class="navbar-brand" href=""><img src="image/logo1.png></a>
  • Change Icon
    • <i class="fa-solid fa-user"></i>
<i class="fa-solid fa-envelope"></i>

    Example :

  • Changing Theme Color
    • :root{
--primary: #141414;
--text-color: #2F2F2F;
--accent-color: #A293FF;
>

Components Overview

    • This section contains the navigation menu.

    <header> 
    <div class="hero-container">
        <nav class="navbar navbar-expand-xl">
            <div class="container-fluid">
                <div class="logo-container">
                    <a class="navbar-brand" href="#"><img src="image/logo.png" alt="" class="img-fluid"></a>
                </div>
                <button class="navbar-toggler nav-btn" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                    aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                    <i class="fa-solid fa-bars accent-color-2"></i>
                </button>
                <div class="collapse navbar-collapse" id="navbarNav">
                    <ul class="navbar-nav ms-auto mb-2 mb-xl-0 gap-xl-4 gap-1">
                        <li class="nav-item">
                            <a class="nav-link active" aria-current="page" href="index.html">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link active" aria-current="page" href="about.html">About Us</a>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
                                aria-expanded="false">
                                Our Sevices <i class="fa-solid fa-angle-down accent-color-2"></i>
                            </a>
                            <ul class="dropdown-menu">
                                <li><a class="dropdown-item" href="service.html">Service</a></li>
                                <li><a class="dropdown-item" href="service.html">Service Details</a></li>
                            </ul>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
                                aria-expanded="false">
                                Pages <i class="fa-solid fa-angle-down accent-color-2"></i>
                            </a>
                            <ul class="dropdown-menu">
                                <li><a class="dropdown-item" href="pricing.html">Pricing Plan</a></li>
                                <li><a class="dropdown-item" href="talent.html">Talent</a></li>
                                <li><a class="dropdown-item" href="talent_details.html">Talent Details</a></li>
                                <li><a class="dropdown-item" href="single_post.html">Single Post</a></li>
                                <li><a class="dropdown-item" href="faq.html">FAQs</a></li>
                                <li><a class="dropdown-item" href="404_page.html">404 Page</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
                </a class="btn btn-accent-1">Book Your Stay</a>
            </div>
        </nav>
    </div>
</header>

    • It is present on every page to display website information.

    <footer> 
    <div class="section-footer bg-footer">
        <div class="footer">
            <:div class="d-flex flex-row justify-content-between">
                <div class="footer-img-container">
                    <img src="./image/logo.png" alt="logo" class="img-fluid logo">
                    <p>Description</p>
                </div>
                <div class="quick-link">
                ...
                </div>
            </div>
        </div>
        <div class="d-flex flex-column gspace-3">
            <h3>Our Services</h3>
            <p>...<>
        </div>
        <div class=newsletter>
            <div class="newsletter">
                <input type="email" id="newsletter-email" placeholder="Email"<
                <button type="submit_form">Submit</button>
            </div>
        </div>
        ...
        <span class="text-white">Influencely © 2024 All Rights Reserved by FoxCreation</span>
    </div>
</footer>

Dependencies

his template uses several libraries and frameworks to improve its appearance and functionality: